<template>
  <div>
   <el-upload
    class="avatar-uploader"
    action="#"
    :on-change="handleChange"
    :show-file-list="false"
    :disabled="disabled"
    accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PBG"
    :auto-upload="false">
        <div v-if="imageUrl">
            <img :src="imageUrl" class="avatar">
            <span class="el-upload-list__item-actions">
                <span                               
                class="el-upload-list__item-delete"
                @click.stop="handleRemove()"
                >
                <i class="el-icon-delete"></i>
                </span>
            </span>
        </div>
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>

<script>
  export default {
    props:{
        maxSize:{//上次图片最大值kb
            type:Number,
            default:200
        },
    },
    data() {
      return {
        imageUrl: '',
        dialogVisible: false,
        disabled: false,
      };
    },
    watch:{
        imageUrl(){
            this.disabled=this.imageUrl.length>0
        }
    },
    methods: {
        setImageUrl(img_url){
            if(!!img_url){
                this.imageUrl= img_url
            }
        },
        handleRemove() {
            this.imageUrl=''
            setTimeout(()=>{
                this.disabled=false
            },500)
            this.$emit('FileList', '');
        },
        handleChange(file,fileList) {
            console.log(file)
            const isLt2M = file.size / 1024 < this.maxSize;
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过'+this.maxSize+'kb!');
                return
            }
            this.imageUrl = URL.createObjectURL(file.raw);
            this.disabled=true
            this.$emit('FileList', file);
        },
    }
  }
</script>
<style scoped lang="less" >
    .avatar-uploader /deep/.el-upload {
        border: 1px dashed #777;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader /deep/.el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 80px;
        height: 80px;
        line-height: 80px;
        text-align: center;
    }
    .avatar {
        width: 80px;
        height: 80px;
        display: block;
    }
    .el-upload-list__item-actions {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        cursor: default;
        text-align: center;
        color: #fff;
        opacity: 0;
        font-size: 20px;
        background-color: rgba(0,0,0,.5);
        transition: opacity .3s;
    }
    .el-upload-list__item-actions:hover {
        opacity: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        span {
            display: inline-block;
            cursor: pointer;
        }
        .el-upload-list__item-delete {
            position: unset;
            font-size: inherit;
            color: inherit;
        }
    }
</style>